<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>tsinglog - 文章列表</title>
  <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="/static/fonts/iconfont.css">
  <link rel="stylesheet" href="/static/lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/zzsc.css">
  <link rel="stylesheet" href="/static/lib/DCalendar/css/dcalendar.picker.css">
  <link rel="stylesheet" href="/static/css/common/base.css">
  <link rel="stylesheet" href="/static/css/common/layout.css">
  <link rel="stylesheet" href="/static/css/content/notice.css">
  <link rel="stylesheet" href="/static/css/content/modal.css">
  <link rel="stylesheet" href="/static/css/list.css">
</head>
<body>

<!--顶部-->
<div th:replace="layout/header :: header"></div>

<!--内容-->
<div class="content">
  <div class="content-in div-in">
    <div class="container">
      <div class="row">
        <!--内容左侧区域-->
        <div th:replace="layout/left :: left"></div>
        <!--内容中间区域-->
        <div class="col-md-7 col-md-offset-2 content-center">
          <!--公告-->
          <div th:replace="content/notice :: notice"></div>
          <!--文章列表-->
          <div class="article-list-box">
            <!--标题-->
            <div class="box-title">
              <a href="javascript:;">
                文章列表<span> / Article List</span>
              </a>
              <!--分类-->
              <div class="category-box">
                <a cid="0" href="http://www.tsinglog.online/list" class="category-item">全部</a>
                <a
                  th:each="category:${categoryList}"
                  th:cid="${category.id}"
                  th:text="${category.categoryName}"
                  th:href="@{${category.link}}"
                  class="category-item"></a>
              </div>
            </div>

            <!--文章列表-->
            <div class="media" th:each="article:${latestArticlePage.data}"
                 th:onclick="'toArticle('+ ${article.id} + ')'">
              <div class="media-left">
                <img th:src="@{${article.coverImage}}"/>
              </div>
              <div class="media-body">
                <h4 class="media-heading" th:text="${article.title}"></h4>
                <p th:text="${article.summary}"></p>
                <ul class="clearfix">
                  <li>
                    <i class="iconfont icon-shijian"></i>
                    <span th:text="${article.releaseTime}"></span>
                  </li>
                  <li>
                    <i class="iconfont icon-yanjing"></i>
                    <span th:text="${article.browseCount}"></span>
                  </li>
                  <li>
                    <i class="iconfont icon-pinglun"></i>
                    <span th:text="${article.commentCount}"></span>
                  </li>
                  <li>
                    <i class="iconfont icon-xihuan"></i>
                    <span th:text="${article.preferCount}"></span>
                  </li>
                  <li>
                    <i class="iconfont icon-fenlei"></i>
                    <span th:if="${article.type} == '1'">原创</span>
                    <span th:if="${article.type} == '2'">转载</span>
                  </li>
                </ul>
              </div>
              <span class="article-flag" th:if="${article.upToTop == 1}">置 顶</span>
            </div>

            <!--分页-->
            <nav aria-label="Page navigation" class="fr" th:if="${latestArticlePage.pageInfo.pages gt 1}">
              <ul class="pagination">
                <li th:class="${latestArticlePage.pageInfo.pageNum lt 4}? 'disabled': ''">
                  <a th:href="${latestArticlePage.pageInfo.pageNum lt 4}?'javascript:;': @{${latestArticlePage.firstLink}}"
                     title="首页"
                     class="iconfont icon-icon_paging_left"></a>
                </li>
                <li th:class="${latestArticlePage.pageInfo.isFirstPage}? 'disabled': ''">
                  <a th:href="${latestArticlePage.pageInfo.isFirstPage}? 'javascript:;': @{${latestArticlePage.previousLink}}"
                     title="上一页"
                     class="iconfont icon-fenye1"></a>
                </li>
                <li th:each="item:${latestArticlePage.linkInfo}">
                  <a th:href="@{${item.link}}" th:text="${item.num}"></a>
                </li>
                <li th:class="${latestArticlePage.pageInfo.isLastPage}? 'disabled': ''">
                  <a th:href="${latestArticlePage.pageInfo.isLastPage}? 'javascript:;': @{${latestArticlePage.nextLink}}"
                     title="下一页"
                     class="iconfont icon-fenye"></a>
                </li>
                <li th:class="${latestArticlePage.pageInfo.pageNum gt latestArticlePage.pageInfo.pages - 3}? 'disabled': ''">
                  <a th:href="${latestArticlePage.pageInfo.pageNum gt latestArticlePage.pageInfo.pages - 3}? 'javascript:;': @{${latestArticlePage.lastLink}}"
                     title="尾页"
                     class="iconfont icon-icon_paging_right"></a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
        <!--内容右侧区域-->
        <div th:replace="layout/right :: right"></div>
      </div>
    </div>

  </div>
</div>
<!--底部-->
<div th:replace="layout/footer :: footer"></div>
<!--提示框-->
<div th:replace="content/modal :: modal"></div>

<script src="../static/lib/jquery/jquery.js"></script>
<script src="../static/lib/bootstrap/js/bootstrap.js"></script>
<script src="../static/lib/DCalendar/js/dcalendar.picker.js"></script>
<script src="../static/js/notice.js"></script>
<script src="../static/js/layout.js"></script>
<script src="../static/js/modal.js"></script>

<script th:inline="javascript">
  let currentPage = [[${param.page}]];
  let cid = [[${param.cid}]];
  let url = [[${#httpServletRequest.requestURL}]];

  $(function() {
    // 1.实现点击分类跳转页面后，被点击的分类有选中的效果
    dealWithCategoryClicked();

    // 2.实现分页插件中当前页被选中的效果
    dealWithPaginationClicked();

    let a = [[${hotArticleList}]];
    console.log(a);
  });



  /**
   * 实现点击分类跳转页面后，被点击的分类有选中的效果
   * @constructor
   */
  function dealWithCategoryClicked() {
    let items = $(".category-box").children();
    if (cid != null) {
      for (let i = 0; i < items.length; i++) {
        let item = items.eq(i + 1);
        if (item.attr("cid") == cid[0]) {
          item.addClass("active");
          break;
        }
      }
    } else {
      items.eq(0).addClass("active");
    }
  }

  /**
   * 实现分页插件中当前页被选中的效果
   */
  function dealWithPaginationClicked() {
    let items = $(".pagination").children();
    if (currentPage != null) {
      for (let i = 0; i < items.length; i++) {
        let item = items.eq(i + 2);
        if ($.trim(item.text()) == currentPage[0]) {
          item.addClass("active");
          break;
        }
      }
    } else {
      items.eq(2).addClass("active");
    }
  }

  function toArticle(aid) {
    window.location.href = '/article/' + aid;
  }

</script>
</body>
</html>